<template >
    <div>
        <div style="float:left;">
            <a-list item-layout="horizontal" :data-source="materialCheckList">
                <a-list-item slot="renderItem" slot-scope="item">
                    <div v-if="item.fzflag=='true'" >
                        <h1 style="float: left;color:coral;"><a-icon type="inbox"/>&nbsp;{{ item.clgroup }}</h1>
                    </div>
                    <div v-if="item.fzflag=='false'"  style="float:left">
                        <a-list-item-meta>
                            <a slot="title" style="float: left;" @click="imageView(item.m01004,item.m01005)">{{ item.m01002 }}.{{item.m01005}}</a>
                        </a-list-item-meta>
                        <div style="float:left">
                            <a slot="actions" v-if="imageFlag(item.m01005)"  @click="imageView(item.m01004,item.m01005)">预览</a>
                            <a slot="actions" style="margin: 10px"  @click="dowloadFile(item.m01004,item.m01002)">下载</a>
                        </div>
                    </div>
                </a-list-item>
            </a-list>
        </div>
        <viewer v-if="!pdfShow" ref="viewer" :images="imgs" :style="imageShow" :hidden="handleImageCancel" align="center" style="height:100%">
            <img style="max-width:100%;max-height: 90% " v-for="src in imgs" :src="src" :key="src"/>
        </viewer>
        <a-modal v-model="pdfShow"
                 style="top: 1px;"
                 width="80%"
                 :body-style="imgStyleBody"
                 title="材料预览"
                 footer="">
            <iframe   style="width:100%;height: 90% " :src="imgSrc"/>
        </a-modal>
    </div>
</template>

<script>
    import {queryMaterialCheckList,getFileList,fileDownloadUrl,fileShowUrl} from "@/services/system/api"
    //import modal from 'ant-design-vue/es/modal'

    export default {
        name: 'MaterialCheck',
        props:["materialBusNo"],
        components: {
        },
        data(){
            return{
                //图片预览高度
                imgStyleBody:{'height':document.documentElement.clientHeight*0.75+'px'},
                //图片预览地址
                imgSrc:null,
                ///已上传的材料列表(受控)
                materialCheckList:[],
                //当前上传材料列表
                //clList:[],
                //展示图片
                imageShow:"visibility:hidden",
                //展示pdf
                pdfShow:false,
                imgs:[],
            }
        },
        created() {
            this.loadMaterialList();
        },
        methods:{
            //加载材料列表
            loadMaterialList(){
                //获取配置参数判断获取材料调用接口
                let fileApiVersion=process.env.VUE_APP_FILE_VERSION;
                if(fileApiVersion=='old'){
                    // 发送请求获取界面还原数据
                    var param={
                        "bizno": this._props.materialBusNo.busNo,
                        "operationType":this._props.materialBusNo.operationType
                    };
                    this.$http.post(queryMaterialCheckList,param).then((res) => {
                        let result=res.result;

                        var clgroup='';
                        let j=1;
                        for(let i=0;i<result.length;i++){
                            if(result[i].m01003!=clgroup){
                                j=1;
                                var re1={};
                                clgroup=result[i].m01003;
                                re1.fzflag='true'
                                re1.clgroup=result[i].clgroup;
                                this.materialCheckList.push(re1);
                            }
                            var re={};
                            re=result[i];
                            re.m01002=j+'、'+re.m01002;
                            re.fzflag='false';
                            this.materialCheckList.push(re);
                            j=j+1;
                        }

                    }).catch(() => {

                    })
                }else{
                    // 发送请求获取界面还原数据
                    var param={
                        "busNo": this._props.materialBusNo.busNo
                    };
                    this.$http.post(getFileList,param).then((res) => {
                        let result=res.result;

                        var clgroup='';
                        for(let i=0;i<result.length;i++){
                            if(result[i].clgroup!=clgroup){
                                var re1={};
                                clgroup=result[i].clgroup;
                                re1.fzflag='true'
                                re1.clgroup=result[i].clgroup;
                                this.materialCheckList.push(re1);

                            }
                            var re={};
                            re.m01002=result[i].fileOrigName;
                            re.m01004=result[i].fileOrigUrl;
                            re.m01005=result[i].fileOrigType
                            re.fzflag='false';
                            this.materialCheckList.push(re);

                        }

                    }).catch(() => {

                    })
                }

            },
            //判断当前文件是否为图片类型
            imageFlag(imageType){
                if(imageType){
                    var imageTypes=['png','gif','bmp','jpeg','image','pdf','jpg'];
                    for(var i=0;i<imageTypes.length;i++){
                        if(imageType.toLowerCase()==imageTypes[i]){
                            return true;
                        }
                    }
                    return false;
                }
                return false;
            },
            //图片预览
            imageView(url,imageType){
                this.imgs=[];
                this.imgSrc=fileShowUrl+url;
                if(this.pdfFlag(imageType)){
                    this.imageShow="visibility:hidden";
                    this.pdfShow=true;
                }else{
                    this.imgs.push(this.imgSrc);
                    const viewer=this.$refs['viewer'].$viewer;
                    viewer.show();
                    this.imageShow="visibility:visible";
                    this.pdfShow=false;
                }
            },
            handleImageCancel(){
                this.imgs=[];
            },
            //判断是否为pdf文档
            pdfFlag(imageType){
                if(imageType){
                    if(imageType.toLowerCase()=="pdf"){
                        return true;
                    }
                }
                return false;
            },

            //下载文件
            dowloadFile(url,fileName){
                console.log(fileName)
                //let fileURL=process.env.VUE_APP_FILE_BASE_URL;
                // let downLoadFileURL=process.env.VUE_APP_FILE_DOWNLOADFILE;
                let downloadUrl = fileDownloadUrl+url;
                let a = document.createElement('a');
                a.href = downloadUrl;
                a.click();
            },
        }
    }
</script>